<template>
  <!-- 主容器，支持暗黑模式 -->
  <view class="maintenance-container" :class="{ dark: isDark }">
    <!-- 自定义导航栏 -->
    <view class="nav-bar">
      <!-- 返回按钮 -->
      <view class="nav-back" @click="goBack"><</view>
      <!-- 页面标题 -->
      <view class="nav-title">维护保养</view>
    </view>

    <!-- 顶部自检区域 -->
    <view class="check-section">
      <!-- 状态图标，带波浪动画 -->
      <view class="check-status-icon">
        <view class="wave" v-if="isChecking"></view>
        <!-- 根据状态显示不同图标 -->
        <text>{{ isChecking ? '🔧' : (overallStatus === '良好' ? '✅' : '⚠️') }}</text>
      </view>
      <!-- 状态文本 -->
      <text class="check-status-text">{{ isChecking ? '正在检测中...' : `系统状态: ${overallStatus}` }}</text>
      <!-- 自检按钮 -->
      <button class="check-button" @click="startSelfCheck" :disabled="isChecking">
        {{ isChecking ? '检测中' : '开始一键自检' }}
      </button>
    </view>

    <!-- 组件状态列表 -->
    <text class="component-list-title">组件状态详情</text>
    <scroll-view scroll-y class="component-list">
      <!-- 组件状态项 -->
      <view class="component-item" v-for="(item, index) in components" :key="index">
        <!-- 组件图标 -->
        <text class="item-icon">{{ item.icon }}</text>
        <!-- 组件名称 -->
        <text class="item-name">{{ item.name }}</text>
        <!-- 组件状态 -->
        <view class="item-status" :class="item.status === '正常' ? 'ok' : (item.status === '检测中...' ? 'checking' : 'error')">
          <view class="status-dot"></view>
          <text>{{ item.status }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      isChecking: false,      // 是否正在检测中
      overallStatus: '良好',  // 整体状态
      components: [           // 组件状态列表
        { icon: '⚙️', name: '电机系统', status: '正常' },
        { icon: '🔋', name: '电池管理', status: '正常' },
        { icon: '📡', name: '通信模块', status: '正常' },
        { icon: '🧭', name: '导航传感器', status: '正常' },
        { icon: '🧠', name: '主控芯片', status: '正常' },
      ],
      isDark: false           // 是否暗黑模式
    };
  },
  
  // 页面显示生命周期
  onShow() {
    // 获取全局暗黑模式设置
    const dark = getApp().globalData.darkMode;
    this.isDark = dark;
  
    // 根据暗黑模式设置界面样式
    if (dark) {
      // 暗黑模式下的样式设置
      uni.setTabBarStyle({
        backgroundColor: '#1e1e1e',
        borderStyle: 'black',
        color: '#999999',
        selectedColor: '#ffffff'
      });
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#1e1e1e'
      });
    } else {
      // 明亮模式下的样式设置
      uni.setTabBarStyle({
        backgroundColor: '#ffffff',
        borderStyle: 'black',
        color: '#7A7E83',
        selectedColor: '#fb7e29'
      });
      uni.setNavigationBarColor({
        frontColor: '#000000',
        backgroundColor: '#F8F8F8'
      });
    }
  },
  
  // 方法定义
  methods: {
    /**
     * 返回上一页
     */
    goBack() {
      uni.switchTab({
        url: '/pages/AppCenter/AppCenter'
      })
    },
    
    /**
     * 开始自检
     */
    startSelfCheck() {
      // 设置检测状态
      this.isChecking = true;
      this.overallStatus = '检测中';

      // 初始化所有组件状态为"检测中..."
      this.components.forEach(item => item.status = '检测中...');
      
      // 模拟3秒检测过程
      setTimeout(() => {
        let hasError = false;
        
        // 随机生成组件状态，10%概率异常
        this.components.forEach(item => {
          const isOk = Math.random() > 0.1;
          item.status = isOk ? '正常' : '异常';
          if (!isOk) hasError = true;
        });
        
        // 设置整体状态
        this.overallStatus = hasError ? '存在异常' : '良好';
        this.isChecking = false;
        
        // 显示检测完成提示
        uni.showToast({
          title: '检测完成',
          icon: 'success'
        });

      }, 3000);
    }
  }
}
</script>
<style lang="scss">
  // 导入全局样式
  @import "@/common/page-style.scss";

  /* 自检区域样式 */
  .check-section {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    padding: 60rpx 40rpx;
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* 状态图标样式 */
  .check-status-icon {
    width: 160rpx;
    height: 160rpx;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60rpx;
    margin-bottom: 24rpx;
    position: relative;
    overflow: hidden;
  }

  /* 波浪动画样式 */
  .wave {
    position: absolute;
    width: 200%;
    height: 200%;
    background: rgba(255,255,255,0.2);
    border-radius: 45%;
    animation: wave-animation 4s linear infinite;
  }

  /* 波浪动画定义 */
  @keyframes wave-animation {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  
  /* 状态文本样式 */
  .check-status-text {
    font-size: 32rpx;
    margin-bottom: 40rpx;
  }

  /* 自检按钮样式 */
  .check-button {
    width: 80%;
    background: #fff;
    color: #ff6b35;
    border-radius: 50rpx;
    font-weight: 600;
    transition: all 0.2s;
    
    /* 按钮按下效果 */
    &:active {
      background: #f0f0f0;
    }
    
    /* 禁用状态样式 */
    &[disabled] {
      background: rgba(255,255,255,0.7);
      color: #f7931e;
    }
  }

  /* 组件列表标题样式 */
  .component-list-title {
    padding: 32rpx;
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }
  
  /* 组件列表容器样式 */
  .component-list {
    padding: 0 32rpx;
    height: calc(100vh - 100rpx - 44px - 450rpx);
  }

  /* 组件项样式 */
  .component-item {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 40rpx;
    border-radius: 24rpx;
    margin-bottom: 24rpx;
    margin-right: 60rpx;
    box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.04);
    
    /* 组件图标样式 */
    .item-icon {
      font-size: 40rpx;
      margin-right: 24rpx;
    }
    
    /* 组件名称样式 */
    .item-name {
      flex: 1;
      font-size: 30rpx;
      color: #333;
    }
    
    /* 组件状态样式 */
    .item-status {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      
      /* 状态点样式 */
      .status-dot {
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        margin-right: 12rpx;
      }
      
      /* 正常状态样式 */
      &.ok { 
        color: #2ed573; 
        .status-dot { 
          background: #2ed573; 
        } 
      }
      
      /* 异常状态样式 */
      &.error { 
        color: #ff4757; 
        .status-dot { 
          background: #ff4757; 
        } 
      }
      
      /* 检测中状态样式 */
      &.checking { 
        color: #666; 
        .status-dot { 
          background: #ccc; 
        } 
      }
    }
  }
  
  /* 暗黑模式样式覆盖 */
  .dark {
    .maintenance-container {
      background: #121212;
    }
    
    .nav-bar {
      background: #1e1e1e;
      color: #fff;
    }

    .check-section {
      background: linear-gradient(135deg, #444 0%, #222 100%);
      color: #fff;
    }

    .check-status-icon {
      background: rgba(255, 255, 255, 0.15);
    }

    .wave {
      background: rgba(255, 255, 255, 0.15);
    }

    .check-status-text {
      color: #fff;
    }

    .check-button {
      background: rgba(255, 255, 255, 0.15);
      color: #ff6b35;
      &[disabled] {
        background: rgba(255, 255, 255, 0.7);
        color: #f7931e;
      }
      &:active {
        background: #f0f0f0;
      }
    }

    .component-list-title {
      color: #ddd;
    }

    .component-list {
      background: transparent;
    }
    
    .nav-back {
      color: #fff;
    }
    
    .nav-title {
      color: #fff;
    }

    .component-item {
      background: #1e1e1e;
      box-shadow: none;
      margin-right: 60rpx;

      .item-icon {
        color: #ff6b35;
      }

      .item-name {
        color: #eee;
      }
    
      .item-status {
        &.ok {
          color: #2ed573;
          .status-dot {
            background: #2ed573;
          }
        }
        &.error {
          color: #ff4757;
          .status-dot {
            background: #ff4757;
          }
        }
        &.checking {
          color: #999;
          .status-dot {
            background: #666;
          }
        }
      }
    }
  }
</style>